<template>
  <el-card class="mt-10">
    <el-button
      icon="el-icon-plus"
      type="primary"
      size="small"
      :disabled="!category3Id"
      @click="ShowAddOrUpdate"
      >添加属性</el-button
    >
    <el-table border class="mt-10" :data="attrList">
      <el-table-column label="序号" type="index" width="80" align="center" />
      <el-table-column label="属性名字" prop="attrName" />
      <el-table-column label="属性值列表">
        <template v-slot="{ row }">
          <el-tag
            v-for="attrValue in row.attrValueList"
            :key="attrValue.id"
            class="mr-10 mt-10"
            >{{ attrValue.valueName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            icon="el-icon-edit-outline"
            type="warning"
            size="small"
            @click="editAttr(row)"
          />
          <el-button
            icon="el-icon-delete"
            type="danger"
            size="small"
            @click="deleteAttr(row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'AttrList',
  computed: {
    ...mapState({
      category1Id: (state) => state.category.category1Id,
      category2Id: (state) => state.category.category2Id,
      category3Id: (state) => state.category.category3Id,
      attrList: (state) => state.attr.attrList
    })
  },
  watch: {
    category3Id(newValue, oldValue) {
      this.getOrUpdateAttrList()
    }
  },
  methods: {
    ShowAddOrUpdate() {
      this.$emit('showAttrList', false)
    },
    // 获取页面
    getOrUpdateAttrList() {
      this.$store.dispatch('getAttrInfoList', {
        category1Id: this.category1Id,
        category2Id: this.category2Id,
        category3Id: this.category3Id
      })
    },
    // 删除单个属性
    deleteAttr(row) {
      try {
        this.$store.dispatch('deleteAttrInfo', row.attrValueList[0].attrId)
        alert('删除成功')
        this.getOrUpdateAttrList()
      } catch (error) {
        alert('删除失败！')
      }
    },
    // 修改属性
    editAttr(row) {
      this.$store.commit('UPDATE_ATTRVALUE', {
        id: row.id,
        attrName: row.attrName,
        attrValueList: row.attrValueList
      })
      this.$emit('showAttrList', false)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
